<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>消息</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/community/bootstrap-4.6.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/community/bootstrap-4.6.0/css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="/community/bootstrap-4.6.0/css/bootstrap-reboot.min.css" />
    <link rel="stylesheet" href="/community/css/community.css" />
    <link rel="stylesheet" href="/community/bootstrap-4.6.0/icons-1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/community/css/jquery-confirm.css">
</head>

<body>

    <header id="header"></header>

    <!-- 主体部分 -->
    <div class="container mt-lg-5">
        <div class="row">
            <!-- 左主体 -->
            <div class="col-lg-2">
                <div class="container-fluid">
                    <div class="row bg-white sticky-top shadow-sm rounded">
                        <div class="col-lg-12 py-lg-2">
                            <ul class="nav flex-column text-center" id="notification-nav"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右主体 -->
            <div class="col-lg-10">
                <div class="bg-white mb-lg-5 shadow-sm rounded">
                    <div class="container-fluid">
                        <div class="row justify-content-between">
                            <div class="col-lg-auto px-lg-3 py-lg-3">
                                <span class="font-weight-bold" id="notification-name"></span>
                            </div>
                            <div class="col-lg-auto px-lg-3 py-lg-3">
                                <span>
                                    <a href="javascript:void(0)" id="notification-clean">
                                        清空所有消息
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div id="notification-list"></div>
                        <!-- 分页 -->
                        <div class="row px-lg-4 py-lg-4">
                            <nav>
                                <ul class="pagination pagination-sm" id="notification-pagination"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<footer id="footer"></footer>

<script src="/community/js/jquery-3.6.0.js"></script>
<script src="/community/js/jquery.cookie.js"></script>
<script src="/community/js/jquery-confirm.js"></script>
<script src="/community/bootstrap-4.6.0/js/bootstrap.bundle.min.js"></script>
<script src="/community/bootstrap-4.6.0/js/bootstrap.min.js"></script>
<script src="/community/js/community.js"></script>

<script>
    $.initTop()
    $.initFooter()
    var split = $(location).attr('href').split("/");
    $.initNotification(split[split.length - 1])
</script>

</html>